<template>
  <div class="system-manual" :class="{ 'dark-theme': isDarkMode }">
    <!-- 头部区域 -->
    <header class="app-header border-b">
      <div class="container flex items-center justify-between p-3">
        <h1 class="text-xl font-bold text-primary">系统说明文档</h1>
        <el-button 
          circle 
          size="small" 
          @click="toggleTheme"
          class="theme-btn"
          title="切换主题"
        >
          <span>{{ isDarkMode ? '🌞' : '🌙' }}</span>
        </el-button>
      </div>
    </header>

    <!-- 欢迎区域 -->
    <section class="welcome-section">
      <div class="welcome-content">
        <h2 class="welcome-title">欢迎来到</h2>
        <p class="welcome-subtitle">系统使用手册</p>
        <p class="scroll-hint">向下滚动查看手册内容 ↓</p>
      </div>
    </section>

    <!-- 主内容区：左侧导航 + 右侧内容 -->
    <main class="main-container">
      <div class="layout-wrapper">
        <!-- 左侧导航 -->
        <aside class="sidebar">
          <h2 class="nav-title text-lg font-semibold mb-3">目录导航</h2>
          <ul class="nav-list">
            <li 
              v-for="(item, index) in navItems" 
              :key="index" 
              @click="activeIndex = index" 
              :class="{ 'active': activeIndex === index }"
              class="cursor-pointer py-2 px-3 rounded-md transition-all duration-200"
            >
              <i :class="item.icon" class="mr-2 text-primary"></i>
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </aside>

        <!-- 右侧内容 -->
        <section class="content">
          <div class="content-header mb-4 pb-3 border-b">
            <h2 class="content-title text-xl font-bold">{{ navItems[activeIndex].title }}</h2>
          </div>
          <div class="content-body" v-html="navItems[activeIndex].content"></div>
        </section>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 主题状态管理
const isDarkMode = ref(false);
// 导航激活状态
const activeIndex = ref(0);

// 导航数据
const navItems = ref([
  {
    title: "一、系统说明",
    icon: "fa-info-circle",
    content: `
      <p>本系统为学习练手项目，由开发小组独立完成，开发过程中使用AI工具辅助编写部分代码。</p>
      <p class="mt-3">系统仅用于学习交流，不涉及商业用途，不对外提供服务。</p>
      <p class="mt-3">系统包含以下学习模块：</p>
      <ul class="list-disc pl-6 mt-2">
        <li>英语模块：提供词汇学习、基础语法等内容</li>
        <li>数学模块：包含公式查询、基础习题等资源</li>
        <li>思政模块：提供基础理论知识和学习资料</li>
        <li>信息模块：包含计算机基础知识和技能介绍</li>
      </ul>
    `
  },
  {
    title: "二、基本操作流程",
    icon: "fa-list-ol",
    content: `
      <h3 class="text-base font-medium mt-2 mb-2">登录与进入系统</h3>
      <p>1. 通过登录界面输入账号信息完成登录（测试阶段可使用默认账号）</p>
      <p>2. 登录成功后自动进入系统首页，展示各模块入口</p>
      
      <h3 class="text-base font-medium mt-4 mb-2">模块使用流程</h3>
      <p>1. 在首页点击对应模块图标进入学习界面</p>
      <p>2. 浏览模块内的学习内容列表，点击条目查看详情</p>
      <p>3. 使用页面提供的功能按钮（如"收藏""练习"）进行互动</p>
      <p>4. 通过顶部导航栏的"返回"按钮回到上级页面</p>
      
      <h3 class="text-base font-medium mt-4 mb-2">退出系统</h3>
      <p>点击右上角"退出"按钮，确认后退出当前账号</p>
    `
  },
  {
    title: "三、核心功能说明",
    icon: "fa-cogs",
    content: `
      <h3 class="text-base font-medium mt-2 mb-2">内容浏览功能</h3>
      <p>各模块提供分类展示的学习资料，支持按标题检索和按时间排序，方便快速查找内容。</p>
      
      <h3 class="text-base font-medium mt-4 mb-2">收藏功能</h3>
      <p>遇到重要内容时，点击页面中的"收藏"按钮可将内容保存到个人收藏夹，在"我的收藏"中集中查看。</p>
      
      <h3 class="text-base font-medium mt-4 mb-2">简单练习功能</h3>
      <p>部分模块提供配套练习题，完成后可查看参考答案，帮助巩固所学知识。</p>
      
      <h3 class="text-base font-medium mt-4 mb-2">学习记录</h3>
      <p>系统自动记录最近浏览的内容，在"学习记录"中可快速找回之前查看过的资料。</p>
    `
  },
  {
    title: "四、注意事项",
    icon: "fa-exclamation-circle",
    content: `
      <p>1. 系统仅用于学习交流，请勿上传或发布与学习无关的内容</p>
      <p>2. 测试阶段数据可能定期清理，重要内容请自行备份</p>
      <p>3. 建议使用现代浏览器（如Chrome、Edge最新版）访问，获得最佳体验</p>
      <p>4. 如遇功能异常，可尝试刷新页面或重新登录</p>
      <p>5. 系统不收集个人敏感信息，登录数据仅用于本地验证</p>
      <p>6. 请勿将系统用于任何商业或非法用途</p>
    `
  }
]);

// 主题切换功能
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
  document.documentElement.classList.toggle('dark-theme', isDarkMode.value);
  localStorage.setItem('systemTheme', isDarkMode.value ? 'dark' : 'light');
};

// 初始化主题设置
onMounted(() => {
  const savedTheme = localStorage.getItem('systemTheme');
  if (savedTheme === 'dark') {
    toggleTheme();
  }
});
</script>

<style scoped>
/* 核心样式变量 */
:root {
  --primary: #4f46e5;
  --text-light: #1f2937;
  --text-dark: #f3f4f6;
  --bg-light: #ffffff;
  --bg-dark: #1f2937;
  --card-light: #f9fafb;
  --card-dark: #111827;
  --border: #e5e7eb;
  --border-dark: #374151;
  --hover: #f3f4f6;
  --active: rgba(79, 70, 229, 0.1);
  --transition: 0.3s;
}

/* 暗色主题适配 */
.dark-theme {
  --text-light: #f3f4f6;
  --text-dark: #1f2937;
  --bg-light: #1f2937;
  --bg-dark: #111827;
  --card-light: #111827;
  --card-dark: #1f2937;
  --border: #374151;
  --hover: #374151;
  --active: rgba(79, 70, 229, 0.2);
}

/* 全局布局 */
.system-manual {
  min-height: 100vh;
  background-color: var(--bg-light);
  color: var(--text-light);
  transition: background var(--transition);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 头部样式 */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--bg-light);
  border-color: var(--border);
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.text-primary { color: var(--primary); }

.theme-btn {
  transition: transform var(--transition);
}
.theme-btn:hover { transform: scale(1.1); }

/* 欢迎区域 */
.welcome-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  padding-top: 64px;
  text-align: center;
}

.welcome-content {
  max-width: 600px;
  padding: 20px;
}

.welcome-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-light);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards 0.5s;
}

.welcome-subtitle {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--primary);
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards 1s;
}

.scroll-hint {
  color: var(--text-light);
  opacity: 0.7;
  font-size: 1rem;
  opacity: 0;
  animation: fadeIn 1s forwards 1.5s, bounce 2s infinite 2s;
}

/* 主内容区布局 */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.layout-wrapper {
  display: flex;
  gap: 20px; /* 左右间距 */
}

/* 左侧导航 */
.sidebar {
  width: 240px; /* 固定宽度 */
  background: var(--card-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  transition: all var(--transition);
}

.nav-title {
  color: var(--text-light);
  transition: color var(--transition);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  color: var(--text-light);
  transition: all var(--transition);
  margin-bottom: 8px;
}

.nav-list li:hover { background: var(--hover); }
.nav-list li.active {
  background: var(--active);
  color: var(--primary);
  font-weight: 500;
}

/* 右侧内容 */
.content {
  flex: 1; /* 占满剩余宽度 */
  background: var(--card-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  transition: all var(--transition);
  min-width: 320px;
}

.content-header { border-color: var(--border); }
.content-title {
  color: var(--text-light);
  transition: color var(--transition);
}

.content-body {
  line-height: 1.8;
  color: var(--text-light);
  transition: color var(--transition);
}

.content-body p { margin-bottom: 1rem; }
.content-body ul { margin-bottom: 1rem; }
.content-body h3 {
  color: var(--text-light);
  margin: 1.5rem 0 0.5rem;
}

/* 动画效果 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .layout-wrapper { flex-direction: column; }
  .sidebar, .content { width: 100% !important; }
  .welcome-title { font-size: 2rem; }
  .welcome-subtitle { font-size: 1.5rem; }
}
</style>